extends /_layout/default.pug

block view
  .fade-in
    .row
      .col-lg-6
        .card
          .card-header
            |  Bootstrap Alerts
            .card-header-actions
              a.card-header-action(href='http://coreui.io/docs/components/bootstrap-alerts/', target='_blank')
                small.text-muted docs
          .card-body
            .alert.alert-primary(role='alert')
              | This is a primary alert—check it out!
            .alert.alert-secondary(role='alert')
              | This is a secondary alert—check it out!
            .alert.alert-success(role='alert')
              | This is a success alert—check it out!
            .alert.alert-danger(role='alert')
              | This is a danger alert—check it out!
            .alert.alert-warning(role='alert')
              | This is a warning alert—check it out!
            .alert.alert-info(role='alert')
              | This is a info alert—check it out!
            .alert.alert-light(role='alert')
              | This is a light alert—check it out!
            .alert.alert-dark(role='alert')
              | This is a dark alert—check it out!
      .col-lg-6
        .card
          .card-header
            |  Bootstrap Alerts
            small
              | use
              code .alert-link
              |  to provide links
          .card-body
            .alert.alert-primary(role='alert')
              | This is a primary alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-secondary(role='alert')
              | This is a secondary alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-success(role='alert')
              | This is a success alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-danger(role='alert')
              | This is a danger alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-warning(role='alert')
              | This is a warning alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-info(role='alert')
              | This is a info alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-light(role='alert')
              | This is a light alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
            .alert.alert-dark(role='alert')
              | This is a dark alert with
              a.alert-link(href='#') an example link
              | . Give it a click if you like.
      // /.col
    // /.row
    .row
      .col-lg-6
        .card
          .card-header
            |  Bootstrap Alerts
            small additional content
          .card-body
            .alert.alert-success(role='alert')
              h4.alert-heading Well done!
              p
                | Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.
              hr
              p.mb-0
                | Whenever you need to, be sure to use margin utilities to keep things nice and tidy.
      // /.col
      .col-lg-6
        .card
          .card-header
            |  Bootstrap Alerts
            small dismissing
          .card-body
            .alert.alert-warning.alert-dismissible.fade.show(role='alert')
              strong Holy guacamole!
              |  You should check in on some of those fields below.
              button.close(type='button', data-dismiss='alert', aria-label='Close')
                span(aria-hidden='true') ×
    // /.row
